<template>
  <n-card :bordered="false" class="proCard">
    <BasicTable
      :columns="columns"
      :dataSource="tableDataSource"
      :row-key="(row) => row.id"
      ref="actionRef"
      :pagination="false"
      :actionColumn="actionColumn"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1090"
    >
      <template #tableTitle>
        <n-button type="primary" @click="handlerAddGame">
          <template #icon>
            <n-icon>
              <PlusOutlined/>
            </n-icon>
          </template>
          添加游戏
        </n-button>
      </template>

      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </BasicTable>
    <n-modal :mask-closable="false" style="width: 60%" v-model:show="showEditModal" :show-icon="false" preset="dialog"
             :title="editTitle">
      <AddGame :defaultValue="updateUser" @submit="submitGameInfo"></AddGame>
    </n-modal>
  </n-card>
</template>

<script lang="ts" setup>
  import {computed, h, onMounted, reactive, ref,onActivated, unref} from 'vue';
  import {useMessage} from 'naive-ui';
  import {BasicTable, TableAction} from '@/components/Table';
  import {BasicForm, FormSchema, useForm} from '@/components/Form/index';
  import {columns, registerHandler, TableItemAction} from './columns';
  import {PlusOutlined} from '@vicons/antd';
  import {useRouter} from 'vue-router';
  import {GameModel, getGameAll, registerGame, updateGame} from "@/api/game/game";
  import AddGame from "./addGame.vue"


  const router = useRouter();
  const formRef: any = ref(null);
  const message = useMessage();
  const actionRef = ref();
  const tableDataSource = ref([]);
  const showEditModal = ref(false);
  const editTitle = ref("");
  const updateUser = ref({});

  const formModel = {
    agentId: "",
    cardAuth: "",
    createTime: "",
    gameDesc: "",
    gameId: "",
    gameName: "",
    gameUrl: "",
    iconUrls: "",
    id: 0,
    loadImgUrl: "",
    onlineTime: "",
    payCallbackUrl: "",
    previewUrls: "",
    proportion: 0,
    status: "Accessing",
    updateTime: "",
  };


  const actionColumn = reactive({
    width: 260,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '编辑',
            onClick: handleGameEdit.bind(null, record),
            type: 'info',
            ifShow: () => {
              return true;
            },
          },
          {
            label: '操作记录',
            type: 'error',
            onClick: handleGameRecord.bind(null, record),
            ifShow: () => {
              return true;
            },
          },
        ],
        select: (key) => {
          message.info(`您点击了，${key} 按钮`);
        },
      });
    },
  });


  const tableItemAction: TableItemAction[] = [
    {
      type: 'CpPayCallback',
      action: async (params: any, item, close) => {
        let tmpParams = Object.assign({}, item, {payCallbackUrl: params.itemValue});
        let value = tmpParams as GameModel;
        await updateGame(value);
        message.success("修改成功");
        close();
        reloadTable()
      }
    },
    {
      type: 'GameUrl',
      action: async (params, item, close) => {
        let tmpParams = Object.assign({}, item, {gameUrl: params.itemValue});
        let value = tmpParams as GameModel;
        await updateGame(value);
        message.success("修改成功");
        close();
        reloadTable()
      }
    },
    {
      type: 'UpdateStatus',
      action: async (params, item) => {
        let tmpParams = Object.assign({}, item, {status: params});
        let value = tmpParams as GameModel;
        await updateGame(value);
        message.success("修改成功");
        reloadTable()
      }
    },
  ];


  function handlerAddGame() {
    editTitle.value = "添加游戏";
    updateUser.value = {};
    showEditModal.value = true
  }

  async function submitGameInfo(gameMode: GameModel) {
    if (gameMode.id) {
      await updateGame(gameMode);
    } else {
      gameMode.id = 0;
      let obj = Object.assign({}, formModel, gameMode);
      await registerGame(obj)
    }
    message.success("提交成功");
    showEditModal.value = false;
    reloadTable()
  }

  function handleGameParam(record: Recordable) {

  }

  function handleGameEdit(record: Recordable) {
    editTitle.value = "编辑游戏";
    showEditModal.value = true;
    updateUser.value = record
  }

  function handleGameRecord(record: Recordable) {

  }


  async function loadDataTable() {

    let data = await getGameAll();
    tableDataSource.value = data ? data : []
  }

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  function reloadTable() {
    loadDataTable();
    actionRef.value.reload();
  }


  onMounted(async () => {
    registerHandler(tableItemAction);
    await loadDataTable()
  });

  onActivated(async () => {
    registerHandler(tableItemAction);
    await loadDataTable()
  });
</script>

<style lang="less" scoped></style>
